<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-09 15:47:05
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @LastEditTime: 2024-03-14 15:02:30
 * @FilePath: \jzjy\src\views\ResourceCenter\resDetails.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 资源详情页 -->
  <div id="container">
    <div class="topBread">
      <div class="bread">
        <span>当前位置：</span>
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: routeurl }">{{routeNmae}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{topTitle}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="content">
      <div class="left" v-if="type != 4">
        <div class="top">
          <span></span>
          <h2>{{ topTitle }}</h2>
        </div>
        <div class="tableHeade" v-show="kejianList.length > 0">
          <h3 class="paixu">排序</h3>
          <h3 class="zyname">资源名称</h3>
          <h3 class="doSome">操作</h3>
        </div>
        <div
          class="tableList"
          v-for="(item, index) in kejianList"
          :key="item.id"
          @click="choseList(item.id)"
          :class="{
            choseit: choseN == item.id,
          }"
          v-show="kejianList.length > 0"
        >
          <div class="paixu">{{ index + 1 }}</div>
          <div class="zyname" @click="goresDetails(item.id)">
            <img src="../../assets/img/ffzyb/vip.png" v-show="item.is_sf == 1">
            {{ item.title }}
          </div>
          <div class="doSome">
            <span @click="yulan(item.id)">查看预览</span>
            <span
              @click="downLoad(item.id,item.is_sf,item.is_pay,type_id,item)"
              :class="{ haveDw: downN.indexOf(item.id) > -1 }"
              >下载课件</span
            >
          </div>
        </div>
        <div class="nothing" v-show="nothingShow">
          <img src="../../assets/img/nothing.png" alt="" />
        </div>
        <div class="yulan">
          <!-- 课件查看预览 -->
          <el-dialog :visible.sync="dialogVisible" width="960px">
            <div class="picList" v-if="!yulanNothingShow">
              <div class="pic" v-for="item in yulanLists" :key="item.id">
                <img :src="item.file_url" alt="" />
              </div>
            </div>
            <div class="nothing" v-if="yulanNothingShow">
              <img src="../../assets/img/nothing.png" alt="" />
            </div>
          </el-dialog>
        </div>
        <!-- 分页部分 -->
        <div class="page1" v-if="kejianList.length > 0">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            background
            :page-sizes="[10, 20, 30]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
          >
          </el-pagination>
        </div>
      </div>
      <div class="left shijuan" v-if="type == 4">
        <div class="top">
          <span></span>
          <h2>{{ topTitle }}</h2>
        </div>
        <div class="tableHeade" v-show="kejianList.length > 0">
          <h3 class="paixu">排序</h3>
          <h3 class="zyname">资源名称</h3>
          <h3 class="doSome">操作</h3>
        </div>
        <div
          class="tableList"
          v-for="(item, index) in kejianList"
          :key="item.id"
          @click="choseList(item.id)"
          :class="{
            choseit: choseN == item.id,
          }"
          v-show="kejianList.length > 0"
        >
          <div class="paixu">{{ index + 1 }}</div>
          <div class="zyname" @click="goresDetails(item.id)">
            {{ item.title }}
          </div>
          <div class="doSome">
            <span @click="yulan(item.id)">查看预览</span>
            <span
              @click="downLoad(item.id,item.is_sf,item.is_pay,type_id,item)"
              :class="{ haveDw: downN.indexOf(item.id) > -1 }"
              >下载课件</span
            >
          </div>
        </div>
        <div class="nothing" v-show="kejianList.length == 0">
          <img src="../../assets/img/nothing.png" alt="" />
        </div>
        <!-- 课件查看预览 -->
        <div class="yulan">
          <el-dialog :visible.sync="dialogVisible" width="960px">
            <div class="picList" v-if="!yulanNothingShow">
              <div class="pic" v-for="item in yulanLists" :key="item.id">
                <img :src="item.file_url" alt="" />
              </div>
            </div>
            <div class="nothing" v-if="yulanNothingShow">
              <img src="../../assets/img/nothing.png" alt="" />
            </div>
          </el-dialog>
        </div>
        <!-- 分页部分 -->
        <div class="page1" v-if="kejianList.length > 0">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            background
            :page-sizes="[10, 20, 30]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
          >
          </el-pagination>
        </div>
      </div>
      <div class="right" v-if="type != 4">
        <div class="top">
          <span></span>
          <h2>更多推荐</h2>
        </div>
        <div class="picBox1">
          <div
            v-for="(item, index) in rightArr"
            :key="index"
            @click="
              gogszx(
                item.kejianbooks_id,
                item.kejianchapters_id,
                item.kejianfl_id,
                item.kejiantag_id,
                item.kemu_id,
                item.nianji_id,
                item.title,
                index
              )
            "
            v-show="picIndex != index"
          >
            <img :src="item.file_url" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- 限制下载条数的弹窗 -->
    <fwbtj
      v-if="fwbtjShow"
      :choseGoodId="choseGoodId"
      :goods_lists="goods_lists"
      :caclose="true"
      @zixun ="zixun"
      @choseGood ="choseGood"
      @goyuyue="goyuyue"
      @closefwbtj ="closefwbtj"
    ></fwbtj>
    <!-- 问题咨询加客服弹窗 -->
    <wtzxTc
      v-if="zixunShow"
      :zykf_file_url="zykf1_file_url"
      @wtzxClose="wtzxClose"
    ></wtzxTc>
    <!-- 下载完成后未添加企业微信的弹窗 -->
      <downEvmTc
        v-if="downQwShow"
        :zykf_file_url="zykf_file_url"
        :xzMsg="xzMsg"
        @qwtcClose="qwtcClose"
      ></downEvmTc>
  </div>
</template>
<script>
import { timeStamp2String } from "../../utils/time";
import { list_kejian, url_kejian, info_kejian,getgoodsbykejian,getkfinfobyip,qywx_status,getgmstatusbykejian } from "../../api/http";
import fwbtj from "../../components/fwbtj/fubtj.vue";
import wtzxTc from "../../components/wtzxTc/wtzxtc.vue";
import downEvmTc from "../../components/zydownevm/zydownevm.vue";
export default {
  inject: ["reload"], //刷新页面
  props: ["xitongMsg", "kefuMsg"],
  components: {
    fwbtj,
    wtzxTc,
    downEvmTc,
  },
  data() {
    return {
      topTitle: "", //顶部标题
      kemu_id: 0, //科目
      kejianbooks_id: 0, //年级
      kejianbooks_id: 0, //书本
      kejianchapters_id: 0, //目录
      kejianfl_id: 0, //分类
      kejiantag_id: 0, //标签
      type: "", //一轮或二轮或试卷类型
      type_id: "", //选择的type_id,语文英语和试卷都不一样
      picIndex: "", //当前展示的在总列表里的index值
      rightArr: [], //右侧要展示的图片列表
      timeStamp2String,
      kejianList: [], //课件列表
      page: 1, //页码
      page_size: 10, //分页大小
      currentPage: 1, //分页默认选中页
      counts: 0, //当前请求到的课件总条数用于分页显示总数
      choseN: 0, //点击选中的
      downN: [], //点击下载的
      nothingShow: false, //空数据
      yulanLists: [], //预览图列表
      dialogVisible: false, //预览显示
      yulanNothingShow: false, //空预览

      routeurl:'',//路径
      routeNmae:'',//路径名

      fwbtjShow:false,//服务包推荐弹窗 付费的未购买时弹出
      zixunShow:false,//咨询客服1二维码弹窗
      zykf1_file_url:'',//资源客服1二维码
      choseGoodId:'',//服务包推荐弹窗选中的商品id
      goods_lists: [], //商品列表

      downQwShow: false,//下载完成弹窗展示隐藏
      zykf_file_url: "", //资源客服二维码
      xzMsg:{is_qw:1,type_id:'',baotype:'',kemu_id:'',nianji_id:''},//下载完成弹窗所需相关
    };
  },
  created() {
    //回到顶部
    $(document).ready(function () {
      $(window).scrollTop(0);
    });
    // this.reload(); //刷新页面
    console.log(this.$route.query, "query参数");
    this.xzMsg.kemu_id = this.$route.query.kemu_id;
    if(this.$route.query.path){
      // localStorage.setItem('path',this.$route.query.path)
      this.routeNmae = this.$route.query.routeName
      this.routeurl = this.$route.query.path
    }
    // const obj = this.$route.query
    this.picIndex = this.$route.query.index;
    this.topTitle = this.$route.query.title;
    this.kemu_id = this.$route.query.kemu_id;
    this.nianji_id = this.$route.query.nianji_id;
    this.kejianbooks_id = this.$route.query.kejianbooks_id;
    this.kejianchapters_id = this.$route.query.kejianchapters_id;
    this.kejianfl_id = this.$route.query.kejianfl_id;
    this.kejiantag_id = this.$route.query.kejiantag_id;
    this.rightArr = JSON.parse(localStorage.getItem("zxArr"));
    this.type = this.$route.query.type;
    this.type_id = this.$route.query.type_id;
    console.log(JSON.parse(localStorage.getItem("zxArr")), 123);
    console.log(this.index, 123);
    list_kejian({
      md5key: localStorage.getItem("md5key"),
      kemu_id: this.kemu_id,
      nianji_ids: this.nianji_id,
      kejianbooks_id: this.kejianbooks_id == 0 ? "" : this.kejianbooks_id,
      kejianchapters_id:
        this.kejianchapters_id == 0 ? "" : this.kejianchapters_id,
      kejianfl_id: this.kejianfl_id == 0 ? "" : this.kejianfl_id,
      type_id: this.type_id,
      kejiantag_id: this.kejiantag_id == 0 ? "" : this.kejiantag_id,
      page_size: this.page_size,
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res);
        this.kejianList = res.retRes;
        this.counts = res.retCounts;
        if (res.retRes.length < 1) {
          this.nothingShow = true;
        } else {
          this.nothingShow = false;
        }
      }
    });
  },
  methods: {
    //关闭服务包推荐弹窗
    closefwbtj(){
      this.fwbtjShow = false
    },
    //去预约
    goyuyue(id,goodsweek_id){
      console.log(id,this.kemu_id)
      this.$router.push({
          name: "Dingzhi",
          query: {
            id: id,
            goodsweek_id:goodsweek_id,
            kemu_id:this.kemu_id,
            type:'dy',
            gopay:1,
          },
        });
    },
    //选择商品
    choseGood(id,goodsweek_id){
      this.choseGoodId = id
      console.log(goodsweek_id,"ceshiceshi ")
    },
    //点击商品咨询按钮
    zixun(){
      console.log(123)
      this.fwbtjShow = false
      getkfinfobyip({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        this.zykf1_file_url = res.retRes.local_zxkf_info.file_url
      });
      this.zixunShow = true
    },
    //关闭问题咨询添加客服1二维码弹窗
    wtzxClose(){
      console.log(123)
      this.zixunShow = false
      this.fwbtjShow = true
    },
    //点击列表
    choseList(id) {
      this.choseN = id;
    },
    //前往课件详情页
    goresDetails(id) {
      let { href } = this.$router.resolve({
        path: "/resource/resDetails?id",
        query: {
          id: id,
          name: "专项资源",
          path: this.$route.fullPath,
          path:this.routeurl,
          routeName:this.routeNmae
        },
      });
      window.open(href, "_blank");
    },
    //课件查看预览
    yulan(id) {
      this.dialogVisible = true;
      info_kejian({
        md5key: localStorage.getItem("md5key"),
        id: id,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "课件详情");
          this.yulanLists = res.retRes.file_lists;
          if (res.retRes.file_lists.length == 0) {
            this.yulanNothingShow = true;
          } else {
            this.yulanNothingShow = false;
          }
        }
      });
    },
    //下载课件
    //获取文件下载链接
    downLoad(id,is_sf,is_pay,type_id,item) {
      this.xzMsg.type_id = type_id;
      if(item.nianji_lists && item.nianji_lists.length == 1){
        this.xzMsg.nianji_id = item.nianji_id;
      }else{
        this.xzMsg.nianji_id = this.$route.query.nianji_id;
      }
      getgmstatusbykejian({
        md5key: localStorage.getItem("md5key"),
        type:1,
        id:id,
        goods_type:this.xzMsg.type_id == 1?3:this.xzMsg.type_id == 2?2:1,
        nianji_id:this.xzMsg.nianji_id
      }).then(res=>{
        console.log(res,"付费包支付状态")
        const bmsg = res.retRes;
        //如果是非课件试卷资源 且尊享包未购买全学年
        if(this.xzMsg.type_id != 1 && this.xzMsg.type_id != 2 && bmsg[0].is_pay == 0){
          this.xzMsg.baotype = 1;//推尊享包
        //如果是非课件试卷资源 且尊享包已购买全学年
        }else if(this.xzMsg.type_id != 1 && this.xzMsg.type_id != 2 && bmsg[0].is_pay == 1){
          this.xzMsg.baotype = 0;//推尊图书
        //如果是试卷资源 且试卷包未购买全学年
        }else if(this.xzMsg.type_id == 2 && bmsg[1].is_pay == 0){
          this.xzMsg.baotype = 2;//推尊图书
        //如果是试卷资源 且试卷包已购买全学年 且尊享包未购买全学年
        }else if(this.xzMsg.type_id == 2 && bmsg[1].is_pay == 1 && bmsg[0].is_pay == 0){
          this.xzMsg.baotype = 1;//推尊享包
        //如果是试卷资源 且试卷包已购买全学年 且尊享包已购买全学年
        }else if(this.xzMsg.type_id == 2 && bmsg[1].is_pay == 1 && bmsg[0].is_pay == 1){
          this.xzMsg.baotype = 0;//推尊图书
        //如果是课件资源 且课件包未购买全学年
        }else if(this.xzMsg.type_id == 1 && bmsg[1].is_pay == 0){
          this.xzMsg.baotype = 3;//推尊课件
        //如果是课件资源 且课件包已购买全学年 且尊享包未购买全学年
        }else if(this.xzMsg.type_id == 1 && bmsg[1].is_pay == 1 && bmsg[0].is_pay == 0){
          this.xzMsg.baotype = 1;//推尊享包
        //如果是课件资源 且课件包已购买全学年 且尊享包已购买全学年
        }else if(this.xzMsg.type_id == 1 && bmsg[1].is_pay == 1 && bmsg[0].is_pay == 1){
          this.xzMsg.baotype = 0;//推尊图书
        }
      })
      if(is_sf == 1 && is_pay == 0){
        getgoodsbykejian({
          md5key: localStorage.getItem("md5key"),
          type:1,
          id:id,
        }).then(res=>{
          console.log(res,"xin 商量列表")
          if (res.retRes.length != 0) {
            this.goods_lists = res.retRes;
            this.goods_id = res.retRes[0].goods_id;
            this.fwbtjShow = true
          }
        })
      }else{
        this.downN.push(id);
        url_kejian({
          md5key: localStorage.getItem("md5key"),
          id: id,
        }).then((res) => {
          console.log(res);
          if (res.retInt == 1) {
            let url = res.retRes.download_file_url;
            const a = document.createElement("a");
            a.href = url;
            a.download = res.retRes.title;
            a.style.display = "none";
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            // getgoodsbykejian({
            //   md5key: localStorage.getItem("md5key"),
            //   type:1,
            //   id:id,
            // }).then(res=>{
            //   console.log(res,"xin 商量列表")
            //   if (res.retRes.length != 0) {
            //     this.xzMsg.baotype = res.retRes[0].type;
            //     this.xzMsg.id = res.retRes[0].goods_id;
            //   }
            // })
            setTimeout(() => {
              qywx_status({
                md5key: localStorage.getItem("md5key"),
                // kf_account: this.kefuMsg.zykf_account,
              }).then((res) => {
                console.log(res);
                if (res.retRes.qywx_status == 0) {
                  this.xzMsg.is_qw = 0;
                  ffzyb_status({
                    md5key: localStorage.getItem("md5key"),
                  }).then((res) => {
                    if (res.retRes.is_dy == 1) {
                      //未订阅 资源客服2二维码
                      this.zykf_file_url = this.kefuMsg.zykf1_file_url;
                      this.downQwShow = true;
                    } else {
                      //已订阅 资源客服1二维码
                      this.zykf_file_url = this.kefuMsg.zykf_file_url;
                      this.downQwShow = true;
                    }
                  });
                }else{
                  this.xzMsg.is_qw = 1;
                  this.downQwShow = true;
                }
              });
            }, 1500);
          }
        });
      }
    },
    //关闭企业微信弹窗
    qwtcClose() {
      this.downQwShow = false;
    },
    //分页
    //调整每页条数
    handleSizeChange(val) {
      console.log("每页条数调整为", val);
      this.page_size = val;
      list_kejian({
        md5key: localStorage.getItem("md5key"),
        kemu_id: this.kemu_id,
        nianji_ids: this.nianji_id,
        kejianbooks_id: this.kejianbooks_id == 0 ? "" : this.kejianbooks_id,
        kejianchapters_id:
          this.kejianchapters_id == 0 ? "" : this.kejianchapters_id,
        kejianfl_id: this.kejianfl_id == 0 ? "" : this.kejianfl_id,
        kejiantag_id: this.kejiantag_id == 0 ? "" : this.kejiantag_id,
        type_id: this.type_id,
        page_size: this.page_size,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res);
          this.kejianList = res.retRes;
          this.counts = res.retCounts;
          if (res.retRes.length < 1) {
            this.nothingShow = true;
          } else {
            this.nothingShow = false;
          }
        }
      });
    },
    //跳转第几页
    handleCurrentChange(val) {
      console.log("当前页为第", val);
      this.page = val;
      //切换后台数据第几页课件列表后重新获取展示列表
      list_kejian({
        md5key: localStorage.getItem("md5key"),
        kemu_id: this.kemu_id,
        nianji_ids: this.nianji_id,
        kejianbooks_id: this.kejianbooks_id == 0 ? "" : this.kejianbooks_id,
        kejianchapters_id:
          this.kejianchapters_id == 0 ? "" : this.kejianchapters_id,
        kejianfl_id: this.kejianfl_id == 0 ? "" : this.kejianfl_id,
        kejiantag_id: this.kejiantag_id == 0 ? "" : this.kejiantag_id,
        type_id: this.type_id,
        page: this.page,
        page_size: this.page_size,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res);
          this.kejianList = res.retRes;
          this.counts = res.retCounts;
          if (res.retRes.length < 1) {
            this.nothingShow = true;
          } else {
            this.nothingShow = false;
          }
        }
      });
    },
    //前往高三专项资源列表
    gogszx(
      kejianbooks_id,
      kejianchapters_id,
      kejianfl_id,
      kejiantag_id,
      kemu_id,
      nianji_id,
      title,
      index
    ) {
      // this.fullscreenLoading = true;
      //  setTimeout(() => {
      //     this.fullscreenLoading = false;
      //   }, 2000);
      this.$router.push({
        name: "Gszx",
        query: {
          kejianbooks_id: kejianbooks_id,
          kejianchapters_id: kejianchapters_id,
          kejianfl_id: kejianfl_id,
          kejiantag_id: kejiantag_id,
          kemu_id: kemu_id,
          nianji_id: nianji_id,
          title: title,
          type: this.type,
          index: index,
          path:this.routeurl,
          routeName:this.routeNmae
        },
      });
      location.reload();
    },
  },
};
</script>
<style>
.el-dialog__headerbtn {
  /* color: #08a579; */
  position: absolute;
  top: 20px;
  right: 40px;
  width: 0;
  height: 0;
}
.el-dialog__headerbtn .el-dialog__close:hover {
  color: #08a579;
}
</style>
<style>
/* 面包屑 */
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link:hover {
  color: #08a579;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  font-weight: normal;
  color: #626366;
}
.el-breadcrumb__separator {
  color: #626366;
}
/* 用于分页 */
.el-select-dropdown__item.selected {
  color: #08a579 !important;
}
.el-pagination__editor.el-input .el-input__inner {
  border-color: #ccc;
}
</style>
<style lang="less" scoped>
#container {
  .topBread {
    margin: 0 auto;
    width: 1200px;
    .bread {
      display: flex;
      margin: 20px auto;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #626366;
      line-height: 24px;
      .el-breadcrumb {
        font-size: 14px;
        line-height: 24px;
        /deep/.el-breadcrumb__item:last-child {
          .el-breadcrumb__inner {
            color: #08a579;
          }
        }
      }
    }
  }
  .content {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 1200px;
    background: #ffffff;
    border: 1px solid #dee0e3;
    .left {
      margin-left: 30px;
      width: 840px;
      .top {
        display: flex;
        margin: 30px;
        margin-left: 0;
        span {
          position: relative;
          top: 3px;
          display: inline-block;
          margin-right: 7px;
          width: 3px;
          height: 20px;
          background: #08a579;
          border-radius: 2px;
        }
      }
      .tableHeade {
        display: flex;
        align-items: center;
        margin: 0 auto;
        height: 54px;
        background: #f0f2f5;
        border-radius: 4px;
        h3 {
          margin-left: 25px;
          text-align: left;
          color: #333333;
          font-size: 16px;
        }
        .paixu {
          //   margin-left: 20px;
          text-align: center;
          width: 120px;
        }
        .zyname {
          width: 390px;
        }
        .upTime {
          margin-left: 60px;
          width: 200px;
        }
        .doSome {
          margin-left: 40px;
          width: 180px;
        }
      }
      .tableList {
        display: flex;
        align-items: center;
        margin: 0 auto;
        // width: 1140px;
        height: 72px;
        background: #fff;
        border-radius: 4px;
        border-bottom: 1px solid #ebeef5;
        cursor: pointer;
        div {
          margin-left: 25px;
          text-align: left;
          color: #646566;
          font-size: 14px;
        }
        .paixu {
          //   margin-left: 20px;
          text-align: center;
          width: 120px;
        }
        .zyname {
          width: 390px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          img{
            width: 28px;
            position: relative;
            top: 4px;
          }
        }
        .zyname:hover {
          color: #08a579;
        }
        .upTime {
          margin-left: 60px;
          width: 200px;
        }
        .doSome {
          margin-left: 40px;
          width: 180px;
          span {
            display: inline-block;
            margin-right: 30px;
            color: #08a579;
            cursor: pointer;
          }
          .haveDw {
            color: #969799;
          }
        }
      }
      //预览
      .yulan{
        /deep/.el-dialog {
        margin-top: 3vh !important;
        padding: 20px;
        border-radius: 14px;
        width: 880px !important;
      }
      /deep/.el-dialog__header {
        padding-top: 40px;
      }
      /deep/.el-dialog__body {
        padding: 0;
        .picList {
          height: 82vh;
          overflow-y: scroll;
          .pic {
            img {
              width: 810px;
            }
          }
        }
        ::-webkit-scrollbar {
          width: 7px;
        }
        ::-webkit-scrollbar-track {
          background-color: #f5f5f5;
          -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
          border-radius: 5px;
        }
        ::-webkit-scrollbar-thumb {
          background-color: rgba(0, 0, 0, 0.2);
          border-radius: 5px;
        }
        ::-webkit-scrollbar-button {
          background-color: #eee;
          display: none;
        }
        ::-webkit-scrollbar-corner {
          background-color: black;
        }
      }
      }
      .nothing {
        margin: 100px;
        text-align: center;
      }
      .nothing {
        margin-top: 100px;
        text-align: center;
      }
      .choseit {
        height: 72px;
        background: #f9f9f9;
        border-radius: 4px;
        .zyname {
          color: #08a579;
        }
      }
    }
    .shijuan {
      width: 1140px;
      .tableHeade {
        .zyname {
          margin-left: 70px;
          width: 590px;
        }
      }
      .tableList {
        .zyname {
          margin-left: 70px;
          width: 590px;
        }
      }
    }
    .right {
      padding-left: 30px;
      width: 270px;
      border-left: 1px solid #dee0e3;
      .top {
        display: flex;
        margin-top: 30px;
        margin-bottom: 30px;
        span {
          position: relative;
          top: 3px;
          display: inline-block;
          margin-right: 7px;
          width: 3px;
          height: 20px;
          background: #08a579;
          border-radius: 2px;
        }
      }
      .picBox1 {
        margin-bottom: 20px;
        cursor: pointer;
        img {
          margin-bottom: 20px;
          width: 240px;
          height: 140px;
        }
      }
      .picBox2 {
        margin-bottom: 20px;
        cursor: pointer;
        img {
          width: 240px;
          height: 226px;
        }
      }
    }
    .page1 {
      width: 800px;
      margin: 40px auto;
    }
    .el-pagination {
      text-align: center;
      margin: 20px 80px 20px 0;
    }
  }
  /deep/.el-select .el-input.is-focus .el-input__inner {
    border-color: #08a579 !important;
  }
  /deep/.el-pagination .el-select .el-input .el-input__inner:hover {
    border-color: #08a579 !important;
  }
  /deep/.el-select .el-input__inner:focus {
    border-color: #08a579 !important;
  }
  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #08a579;
  }
  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
    color: #fff;
  }
  /deep/.el-pager li:hover {
    color: #08a579;
  }
  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
    color: #fff !important;
  }
}
</style>